import { Layout, Image } from 'antd';
import React, { useEffect, useState } from 'react';
import { useLocation, useHistory } from 'react-router-dom';
import AvatarDropdown from './AvatarDropdown';
import logo from '/logo.svg';
import { MENU_LIST } from '@src/const';

const GlobalHeader: React.FC = () => {
  const { Header } = Layout;
  const location = useLocation();
  const history = useHistory();
  const [selectKey, setSelectKey] = useState(0);

  // 路由变化了选择的菜单也需要变化
  useEffect(() => {
    const key =
      MENU_LIST.find((item) => item.link === location.pathname)?.key || 0;
    setSelectKey(key);
  }, [location.pathname]);

  const changeSelectKey = (item: IAnyObject) => {
    setSelectKey(item.key);
    history.push({
      pathname: item.link,
    });
  };
  return (
    <Header
      className='p-0 bg-smart-gray flex justify-between items-center'
      style={{ height: '6vh' }}>
      <div className='flex items-center justify-start'>
        <div className='flex items-center justify-start ml-4'>
          <Image src={logo} style={{ height: '4vh' }} />
          <p className='text-16 font-bold ml-3'>smart AI</p>
        </div>
        <div
          style={{ height: '6vh' }}
          className='bg-smart-gray text-16 flex justify-around font-bold ml-4 w-32 relative'>
          {MENU_LIST.map((item) => {
            return (
              <div
                key={item.key}
                onClick={() => changeSelectKey(item)}
                className='hover:text-blue-400 hover:cursor-pointer flex items-center'
                style={selectKey === item.key ? { color: '#70a3f3' } : {}}>
                <span>{item.title}</span>
                {selectKey === item.key && (
                  <p className='bg-blue-400 h-1 rounded w-5 absolute bottom-0 ml-1'></p>
                )}
              </div>
            );
          })}
        </div>
      </div>
      <div className='mr-10'>
        <AvatarDropdown />
      </div>
    </Header>
  );
};

export default GlobalHeader;
